﻿<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>v-for</title>
</head>
<body>
<div id="app">
  <!--遍历数组 -->
  <table width="50%" border="1px"align="center">
    v-for位置：在需要遍历的元素父元素中书写
    <tr >
      <td>姓名</td>
      <td>性别</td>
      <td>年龄</td>
    </tr>
    <!--思路 我有多少个对象 就有多少个tr  对不对 -->
    <!--对象是不是都在 users里面   需要从users遍历出来
       一个对象一个tr

       要写<tr>  每一个tr跟 user对应
       user来自 users   users进行遍历 每个元素被 user接收
       所以user就是咱们要的对象
         用插值表达式获取 对象中内容
         index是遍历出来的索引 序号 索引+i
    -->
    <tr v-for="user in users">
      <td>{{user.name}}</td>
      <td>{{user.gender}}</td>
      <td>{{user.age}}</td>
    </tr>
  </table>
  <hr>
  <table width="50%" border="1px" align="center">
    v-for位置：在需要遍历的元素父元素中书写
    <tr >
      <td>序号</td>
      <td>姓名</td>
      <td>性别</td>
      <td>年龄</td>
    </tr>
    <!--思路 我有多少个对象 就有多少个tr  对不对 -->
    <!--对象是不是都在 users里面   需要从users遍历出来
       一个对象一个tr

       要写<tr>  每一个tr跟 user对应
       user来自 users   users进行遍历 每个元素被 user接收
       所以user就是咱们要的对象
         用插值表达式获取 对象中内容
         index是遍历出来的索引 序号 索引+i
    -->
    <tr v-for="(user,index) in users">
      <!--<td >{{index+1}}</td>
      或者下面写法 -->
      <td v-text="index+1"></td>
      <td v-text="user.name"></td>
      <td v-text="user.gender"></td>
      <td v-text="user.age"></td>
    </tr>
  </table>
</div>

<script src="../js/vue.js"></script>
<!--js  vue 数据模型层 -->
<script>

  var app = new Vue({
    el: "#app",
    data:{
      //  定义数组对象  遍历的数据源
        users:[
          {name:"刘华强",gender:"男",age:45},
          {name:"柳岩",gender:"女",age:36},
          {name:"周杰伦",gender:"男",age:37},
          {name:"腾格尔",gender:"男",age:64},
          {name:"金晨",gender:"女",age:33}
        ]
    }
  });
</script>
</body>
</html>